<template>
  <div>
    <h3>Main</h3>
    <ul>
      <li v-for="item in newUsers" :key="item.id">
        <span>{{ item.id }}--{{ item.name }}--{{ item.phone }}</span>
      </li>
    </ul>
    <p>计数器：{{ count }}</p>
    <button @click="changeCount">修改count</button>
    <p>信息：{{ msg }}</p>
    <button @click="changeMsg">修改msg</button>
  </div>
</template>

<script lang='ts' setup>
import { IUser3 } from "@/interfaces/userInterface"
import { computed, watch } from "vue"
const users = ref<Array<IUser3>>([
  { id: 1, name: "xiaowang", phone: "13770098790" },
  { id: 2, name: "xiaofei", phone: "13890011234" }
])
const count = ref<number>(0)
const msg = ref<{ title: string, level: number }>({ title: "标题", level: 1 })

/**
 * 计算属性
 */
const newUsers = computed(() => {
  const temp = users.value.filter(item => {
    if (item.id == 2) {
      return true
    }
  })
  return temp
})

/**
 * 侦听器
 * watch:{
 *    count:{
 *      hanlder(oldVal,newVal){
 *        ///
 *      }
 *    }
 * }
 */
watch(() => {
  //返回什么值，代表监听哪个值
  //count是一个对象，侦听这个对象地址
  return count.value
}, (newVal, oldVal) => {
  console.log(newVal, oldVal);
})
watch(() => msg.value, (newVal) => {
  console.log(newVal);
},{
  deep:true,
  immediate:true
})

//回调函数里面用到了哪个变量，当这个变量发生变化，默认侦听
watchEffect(()=>{
  console.log("watchEffect");
  console.log(msg.value);
  
})

/**
 * methods
 */
const changeCount = () => {
  count.value++
}
const changeMsg = () => {
  // msg.value = {title:"标题二",level:2}
  msg.value.title = "标题三"
}

</script>

<style lang='scss' scoped></style>